<template>
    <div class="PetitionReportDetail">
        <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
        <div class="title_wrap">— <span v-text="petitionReportInfo.title"></span> —</div>
        <div style="margin-top:20px;">
            <GridShow :title="'被举报人'" :labelOPtion = "beReportedOption"/>
        </div>
        <div style="margin-top:20px;">
            <UploadFile
                :contentHtml = "petitionReportInfo.content"
                :title ="'举报详情'"
                :subTitle ="''"
                :fileData = "petitionReportInfo.attachList"/>
        </div>
        <div style="margin-top:20px;">
            <GridShow :title="'举报人信息'" :labelOPtion = "ReportedOption"/>
        </div>
        <div style="margin-top:20px;margin-bottom:20px;">
            <GridShow :title="'审核意见'" :labelOPtion = "auditOpinionOption"/>
        </div>
        <div class="sureButton" v-if="$route.query.type === 'deal' && petitionReportInfo.status === '0'">
            <el-button type="reset" style="margin-right: 10px;" @click="cancel">取消</el-button>
            <el-button type="warning" style="margin-right: 10px;" @click="deal('2')">驳回</el-button>
            <el-button type="primary" @click="deal('1')">受理</el-button>
        </div>
    </div>
</template>
<script>
export default {
    components: {
        Breadcrumb : () => import('@/components/IncorruptibleArchives/Breadcrumb.vue'),
        GridShow : () => import('../comonComponent/GridShow'),
        UploadFile: () => import('../comonComponent/uploadFile')
    },
    data() {
        return {
            // 面包屑导航数据
            Breadcrumb: [
                { name: "监督举报", link: "" },
                { name: "信访举报", link: "" },
                { name: "信访举报详情", link: "" }
            ],
            beReportedOption:[
                {prop:'personName', label: '被举报人:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.personName, style: 'line-height: 46px'}}, this.petitionReportInfo.personName)
                    }
                },
                {prop:'personOrgName', label: '举报人工作单位:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.personOrgName, style: 'line-height: 46px'}}, this.petitionReportInfo.personOrgName)
                    }
                },
                {prop:'personPost', label: '被举报人职务:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{ title: this.petitionReportInfo.personPost, style: 'line-height: 46px'}}, this.petitionReportInfo.personPost )
                    }
                },
                {prop:'status', label: '当前状态:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.status === '0' ? '待处理' : this.petitionReportInfo.status === '1' ? '已受理' : this.petitionReportInfo.status === '2' ? '已驳回' : '', style: 'line-height: 46px'}}, this.petitionReportInfo.status === '0' ? '待处理' : this.petitionReportInfo.status === '1' ? '已受理' : this.petitionReportInfo.status === '2' ? '已驳回' : '')
                    }
                },
                {prop:'personRank', label: '级别:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.personRank, style: 'line-height: 46px'}}, this.petitionReportInfo.personRank )
                    }
                },
                {prop:'issueType', label: '问题类型:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => {
                        if (this.$route.query.type === 'deal' && this.petitionReportInfo.status === '0') {
                            let optionArray = this.issueTypeOPtions.map((item, index) => {
                                let optionItem = h('el-option', {attrs :{ style: 'line-height: 46px'}, props:{key: index, label:item.itemName, value:item.itemValue}})
                                return optionItem
                            })
                            return h('el-select', 
                            {
                                attrs :{ style: 'line-height: 46px'}, 
                                props:{value:this.petitionReportInfo.issueType},
                                on: {
                                    change: (option) => {
                                        this.petitionReportInfo.issueType = option
                                        this.petitionReportInfo.issueChildType = ''
                                        this.petitionReportInfo.issueChildTypeOPtions = []
                                        this.dictList('ISSUE_CHILD_TYPE', option)
                                    }
                                }
                            }, optionArray, this.petitionReportInfo.issueType)
                        } else {
                            return h('span', {attrs :{ style: 'line-height: 46px'},}, this.issueTypeOPtions.find(item => item.itemValue === this.petitionReportInfo.issueType) ? this.issueTypeOPtions.find(item => item.itemValue === this.petitionReportInfo.issueType).itemName : '' )
                        }
                    }
                },
                {prop:'issueChildType', label: '问题细类:', labelWidth: '140px', height:'46px', span: 24,
                    valueRender: (h, params, data) => { 
                        if (this.$route.query.type === 'deal' && this.petitionReportInfo.status === '0') {
                            let optionArray = this.issueChildTypeOPtions.map((item, index) => {
                                let optionItem = h('el-option', {attrs :{ style: 'line-height: 46px'}, props:{key: index, label:item.itemName, value:item.itemValue}})
                                return optionItem
                            })
                            return h('el-select', 
                            {
                                attrs :{ style: 'line-height: 46px'}, 
                                props:{value:this.petitionReportInfo.issueChildType},
                                on: {
                                    change: (option) => {
                                        this.petitionReportInfo.issueChildType = option
                                    }
                                }
                            }, optionArray, this.petitionReportInfo.issueChildType)

                        } else {
                            return h('span', {attrs :{ style: 'line-height: 46px'}}, this.issueChildTypeOPtions.find(item => item.itemValue === this.petitionReportInfo.issueChildType) ? this.issueChildTypeOPtions.find(item => item.itemValue === this.petitionReportInfo.issueChildType).itemName : ''  )
                        }
                    }
                },
            ],
            ReportedOption:[
                {prop:'name', label: '举报人姓名:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.name, style: 'line-height: 46px'}}, this.petitionReportInfo.name)
                    }
                },
                {prop:'idCard', label: '身份证号:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.idCard, style: 'line-height: 46px'}}, this.petitionReportInfo.idCard)
                    }
                },
                {prop:'contactInfo', label: '联系方式:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.contactInfo, style: 'line-height: 46px'}}, this.petitionReportInfo.contactInfo )
                    }
                },
                {prop:'politicalOutlook', label: '政治面貌:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{ style: 'line-height: 46px'}}, this.petitionReportInfo.politicalOutlook)
                    }
                },
                {prop:'resideAddress', label: '现居地址:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.resideAddress, style: 'line-height: 46px'}}, this.petitionReportInfo.resideAddress )
                    }
                },
                {prop:'orgName', label: '工作单位:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.orgName, style: 'line-height: 46px'}}, this.petitionReportInfo.orgName )
                    }
                },
                {prop:'createdTime', label: '举报时间:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.createdTime, style: 'line-height: 46px'}}, this.petitionReportInfo.createdTime)
                    }
                },
                {prop:'type', label: '举报方式:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.type === '1' ? '匿名举报' :this.petitionReportInfo.type === '2' ? '实名举报' : '', style: 'line-height: 46px'}}, this.petitionReportInfo.type === '1' ? '匿名举报' :this.petitionReportInfo.type === '2' ? '实名举报' : '' )
                    }
                },
                {prop:'sourceType', label: '举报渠道:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.sourceType === '1' ? '网页' :this.petitionReportInfo.sourceType === '2' ? '二维码' : '' , style: 'line-height: 46px'}}, this.petitionReportInfo.sourceType === '1' ? '网页' :this.petitionReportInfo.sourceType === '2' ? '二维码' : '' )
                    }
                },
                {prop:'code', label: '查询码:', labelWidth: '140px', height:'46px', span: 24,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.code, style: 'line-height: 46px'}}, this.petitionReportInfo.code )
                    }
                },
            ],
            auditOpinionOption:[
                {prop:'approvedTime', label: '审批时间:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.approvedTime, style: 'line-height: 46px'}}, this.petitionReportInfo.approvedTime)
                    }
                },
                {prop:'approvedBy', label: '审批人:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.approvedBy, style: 'line-height: 46px'}}, this.petitionReportInfo.approvedBy )
                    }
                },
                {prop:'status', label: '审批结果:', labelWidth: '140px', height:'46px', span: 8,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.status === '0' ? '待处理' : this.petitionReportInfo.status === '1' ? '已受理' : this.petitionReportInfo.status === '2' ? '已驳回' : '', style: 'line-height: 46px'}}, this.petitionReportInfo.status === '0' ? '待处理' : this.petitionReportInfo.status === '1' ? '已受理' : this.petitionReportInfo.status === '2' ? '已驳回' : '')
                    }
                },
                {prop:'opinion', label: '审批意见:', labelWidth: '140px', height:'80px', span: 24,
                    valueRender: (h, params, data) => { 
                        return h('span', {attrs :{title: this.petitionReportInfo.opinion, style: 'line-height: 46px;word-break:break-all;white-space:normal;'}}, this.petitionReportInfo.opinion )
                    }
                },
            ],
            petitionReportInfo: {},
            opinionValue: '123',
            issueTypeOPtions: [],
            issueChildTypeOPtions: [],
        }
    },
    props: {

    },
    created(){
        if(!this.$route.query.id || !this.$route.query.type) {
            this.$router.go('-1')
        }
    },
    mounted() {
        if (this.$route.query.type === 'deal') {
            // this.$nextTick(()=> {
                this.Breadcrumb[2].name = '信访举报处理'
                // this.Breadcrumb = this.Breadcrumb.slice(0)
                // this.$set(this.Breadcrumb[2], 'name', '信访举报处理')
            // })
            
        }
        this.getComplainDetail(this.$route.query.id)
    },
    methods: {
        // 字典查询接口
        dictList(typeCode, pItemValue) {
            this.Api.Fenlei({typeCode:typeCode, pItemValue : pItemValue}).then(res =>{
                if(res && res.code === '0') {
                    if (typeCode === 'ISSUE_TYPE') {
                        this.issueTypeOPtions = res.data
                    } else if (typeCode === 'ISSUE_CHILD_TYPE') {
                        this.issueChildTypeOPtions = res.data
                    }
                } else {
                   if (typeCode === 'ISSUE_TYPE') {
                        this.issueTypeOPtions = []
                    } else if (typeCode === 'ISSUE_CHILD_TYPE') {
                        this.issueChildTypeOPtions = []
                    }
                    this.$message.warning(res.message)
                }
                
            })
        },
        // 详情接口数据调用
        getComplainDetail(id) {
           let data = {
               id: id
           }
           this.Api.getComplainDetail(data).then(res => {
               if (res && res.code === '0') {
                   this.petitionReportInfo = res.data
                    this.dictList('ISSUE_TYPE')
                    this.dictList('ISSUE_CHILD_TYPE', this.petitionReportInfo.issueType)
                   if (this.$route.query.type === 'view' && this.petitionReportInfo.status === '0') {
                       let optionItem = {prop:'opinion', label: '审批意见:', labelWidth: '140px', height:'80px', span: 24,
                            valueRender: (h, params, data) => { 
                                return h('span', {attrs :{ style: 'line-height: 46px'}}, '暂无' )
                            }
                        }
                       this.auditOpinionOption = []
                       this.auditOpinionOption.push(optionItem)
                   } else if (this.$route.query.type === 'deal' && this.petitionReportInfo.status === '0') {
                        let optionItem = {prop:'opinion', label: '审批意见:', labelWidth: '140px', height:'80px', span: 24,
                            valueRender: (h, params, data) => { 
                                return h('el-input', {attrs :{ style: 'line-height: 46px;', placeholder: "填写信息受理意见，驳回时必填",value: this.petitionReportInfo.opinion}, props: {type:'textarea', resize: 'none', autosize: { minRows: 3, maxRows: 3}},on : {
                                    input : (value) => {
                                        this.petitionReportInfo.opinion = value
                                    }
                                } }, this.petitionReportInfo.opinion )
                            }
                        }
                        this.auditOpinionOption = []
                        this.auditOpinionOption.push(optionItem)
                   }
               } else {
                   this.petitionReportInfo = {}
                   this.$message.warning(res.message)
               }
           })
       },
        // 取消
       cancel() {
           this.$router.go(-1)
       },
        // 处理
       deal (status) {
           if (status === '2' && this.petitionReportInfo.opinion.trim() === '') {
               this.$message.warning('请填写审批意见')
           }
           let data ={
               id:this.petitionReportInfo.id,
               issueChildType:this.petitionReportInfo.issueChildType,
               issueType:this.petitionReportInfo.issueType,
               opinion:this.petitionReportInfo.opinion,
               status:status,
           }
           this.Api.doComplainApprove(data).then(res => {
               if(res && res.code === '0') {
                   this.$message.success((status === '1' ? '受理':'驳回') + '成功')
                   this.$router.go(-1)
               } else {
                    this.$message.warning(res.message)
               }
           })
       },
    }
}
</script>
<style lang="less" scoped>
    .PetitionReportDetail{
        width: 100%;
        height: 100%;
        .title_wrap {
            height: 30px;
            font-size: 22px;
            font-weight: 600;
            color: #333;
            line-height: 30px;
            width: 100%;
            text-align: center;
            margin-top: 30px;
        }
        .sureButton {
			padding: 20px;
			background-color: #FFFFFF;
			margin-top: 20px;
			margin-bottom: 20px;
			height: 56px;
			display: flex;
			justify-content: flex-end;
			align-items: center;

		}
    }
</style>